<!-- 培训明细 -->
<template>
  <px-dialog v-model="visible" title="培训明细" width="80%" @close="cancel">
    <div class="table-top">
      <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
        <px-form-item label="姓名" prop="name">
          <px-input v-model="queryParams.name" style="width: 260px" placeholder="请输入姓名" />
        </px-form-item>
        <px-form-item label="科室" prop="className">
          <px-select v-model="queryParams.className" style="width: 260px" placeholder="请选择科室">
            <px-option v-for="item in classNameList" :key="item.id" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="培训状态" prop="status">
          <px-select v-model="queryParams.status" style="width: 260px" placeholder="请选择培训状态">
            <px-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <div class="search-form-btn">
          <px-button type="primary" @click="handleQuery">搜索</px-button>
          <px-button @click="resetQuery">重置</px-button>
          <px-button @click="handleExport">导出</px-button>
        </div>
      </px-form>
    </div>
    <div v-loading="loading" class="table-content">
      <px-table height="500" :data="tableData" size="small" border class="common-table">
        <px-table-column type="index" fixed width="55" align="center" />
        <px-table-column prop="name" label="姓名" min-width="120" show-overflow-tooltip />
        <px-table-column prop="workNo" label="工号" min-width="120" show-overflow-tooltip />
        <px-table-column prop="departmentName" label="科室" min-width="120" show-overflow-tooltip />
        <px-table-column prop="trainingName" label="培训名称" min-width="120" show-overflow-tooltip />
        <px-table-column prop="stateName" label="培训状态" min-width="120" show-overflow-tooltip />
        <px-table-column prop="progress" label="学习进度" min-width="120" show-overflow-tooltip>
          <template #default="scope"> {{ formateSeconds(scope.row.progress) }} / {{ formateSeconds(scope.row.period) }} </template>
        </px-table-column>
        <px-table-column prop="planTime" label="培训计划时间" min-width="120" show-overflow-tooltip>
          <template #default="scope"> {{ scope.row.planTime || "-" }}</template>
        </px-table-column>
        <px-table-column prop="completeTime" label="培训完成时间" min-width="120" show-overflow-tooltip>
          <template #default="scope"> {{ scope.row.completeTime || "-" }}</template>
        </px-table-column>
        <px-table-column prop="examResult" label="考试成绩" min-width="120" show-overflow-tooltip>
          <template #default="scope"> {{ scope.row.examResult || "-" }}</template>
        </px-table-column>
      </px-table>
      <!-- <pagination
        v-show="total > 0"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        class="table-pagination"
        :total="total"
        @pagination="handleQuery"
      /> -->
    </div>
  </px-dialog>
</template>

<script setup>
import { queryCurrentClassList, queryDictData } from "@/api/common";
import { getDetailListAPI } from "@/api/knowledge/train";
import { formateSeconds } from "@/views/all/knowledge/trainManage/utils";
import { getCurrentInstance, computed, onMounted, reactive, ref, toRefs } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:visible"]);

const { proxy } = getCurrentInstance();

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const formRef = ref();

const state = reactive({
  loading: false,
  queryParams: {
    name: "",
    className: "",
    status: ""
  },
  classNameList: [],
  statusList: [],
  total: 0,
  pageNum: 1,
  pageSize: 20,
  tableData: []
});
const { loading, queryParams, classNameList, statusList, total, pageNum, pageSize, tableData } = toRefs(state);

const cancel = () => {
  emits("update:visible", false);
};

onMounted(() => {
  getClassNameSelect();
  getTrainStatusSelect();
  handleQuery();
});

// 获取培训状态下拉框数据
const getTrainStatusSelect = async () => {
  const statusList = await queryDictData({ typeCode: "TRAIN_STATUS" });
  state.statusList = [...statusList];
};

// 获取科室下拉框数据
const getClassNameSelect = async () => {
  const classNameData = await queryCurrentClassList();
  state.classNameList = [...classNameData];
};

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const { name, className, status } = state.queryParams;
    const params = {
      trainId: props.rowData.id,
      name,
      department: className,
      state: status
    };
    const res = await getDetailListAPI(params);
    if (res?.length) {
      res?.forEach(i => {
        let startTime = i?.planStartTime?.split(" ")[0] ?? "";
        let endTime = i?.planEndTime?.split(" ")[0] ?? "";
        if (startTime && endTime) {
          i.planTime = startTime + "~" + endTime;
        } else {
          i.planTime = "";
        }
      });
    } else {
      state.tableData = [];
    }
    // state.tableData = res.records;
    state.tableData = res;
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

// 导出
const handleExport = () => {
  const { name, className, status } = state.queryParams;
  const params = {
    trainId: props.rowData.id,
    name,
    department: className,
    state: status
  };
  proxy.download("post", "/dms/api/v1/training/exportTraining", params, "培训台账明细.xlsx");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/trainManage/scss/common.scss");
</style>
